<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../media/logo.png" />
    <title>Preview DEMO</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        border: none;
      }
      html {
        font-size: 62.5%;
        line-height: 1.6;
        overflow: initial;
        box-sizing: border-box;
        word-wrap: break-word;
      }
      *,
      :after,
      :before {
        box-sizing: inherit;
      }
      body {
        color: #333;
        background: #f9f9f9;
        min-height: 100%;
        position: relative;
        font-family:
          Helvetica Neue,
          NotoSansHans-Regular,
          AvenirNext-Regular,
          arial,
          Hiragino Sans GB,
          Microsoft Yahei,
          WenQuanYi Micro Hei,
          Arial,
          Helvetica,
          sans-serif;
        -webkit-font-smoothing: antialiased;
        height: 100%;
        font-size: 1.5rem;
      }
      .workspace-container {
        overflow: hidden;
        display: flex;
        flex-direction: column-reverse;
      }
      .workspace-container.main-toc-row {
        flex-direction: row;
        justify-content: flex-end;
      }

      ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 10px;
        height: 10px;
      }
      ::-webkit-scrollbar-track {
        background: rgb(241, 241, 241);
        border-radius: 0;
      }
      ::-webkit-scrollbar-thumb {
        cursor: pointer;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.25);
        transition: color 0.2s ease;
      }
      ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0, 0, 0, 0.15);
      }
      ::-webkit-scrollbar-thumb:hover {
        background: rgba(128, 135, 139, 0.8);
      }
    </style>
    <link rel="stylesheet" href="../node_modules/@jhuix/showdowns/dist/showdowns.min.css" />
    <link rel="stylesheet" href="../media/contextmenu.css" />
    <style type="text/css">
      a {
        color: rgb(0, 122, 204);
        text-decoration: none;
      }
      a:hover,
      a:focus {
        color: rgb(0, 137, 255);
      }
      code {
        background-color: #f8f8f8;
        border-color: #dfdfdf;
        color: #333;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
    <script type="text/javascript">
      window.mdsp = {
        options: {
          cdnName: 'local',
          plantuml: {
            renderMode: 'remote'
          }
        }
      };
      window.addEventListener('showdownsLoaded', function (e) {
        let md = '';
        axios
          .get('https://jhuix.github.io/showdowns/showdowns-features.md')
          .then(function (res) {
            md = res.data;
            return axios.get("https://jhuix.github.io/showdowns/Showdown's-Markdown-syntax.md");
          })
          .then(function (res) {
            md = md + `\n\n# Showdown's Markdown syntax\n\n` + res.data;
            window.mdsp.phtml.updateMarkdown(md);
          })
          .catch(function (error) {
            console.log(error);
            if (md) {
              window.mdsp.phtml.updateMarkdown(md);
            }
          });
      });
    </script>
    <script src="../node_modules/@jhuix/showdowns/dist/showdowns.min.js"></script>
    <script src="../media/webview.js"></script>
  </body>
</html>
